<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QQ登陆 注册/绑定</title>
        {include file="common/meta" /}
        <title>QQ登陆 注册/绑定</title>
        <style type="text/css">
            body {
                background:url({$site.beijing});
            }
            .msg-box {
                display: none;
            }
        </style>
        <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700" rel="stylesheet">
        <link href="http://fonts.googleapis.com/css?family=Roboto:500,400italic,100,700italic,300,700,500italic,400" rel="stylesheet">
        <link href="/assets/home/css/bootstrap.min.css" rel="stylesheet">
        <link href="/assets/home/css/style2.css" rel="stylesheet">
        <link href="/assets/home/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="/assets/home/plugins/switchery/switchery.min.css" rel="stylesheet">
        <link href="/assets/home/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
        <link href="/assets/home/css/demo/jasmine.css" rel="stylesheet">
        <link href="/assets/home/plugins/pace/pace.min.css" rel="stylesheet">
        <script src="/assets/home/plugins/pace/pace.min.js"></script>
    </head>
    <body>
        <div id="container" class="cls-container">
            <div class="lock-wrapper">
                <div class="panel lock-box">
                    <div class="center"> <img alt="" src="/assets/home/img/user.png" class="img-circle"/> </div>
                    <h4> QQ Bind</h4>
                    <div class="row">
                      <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <select class="form-control">
                          <option value="1">绑定老用户</option>
                          <option value="0">注册新用户</option>
                        </select>
                      </div>
                      <form name="form" class="form-inline" id="qqlogin-form" method="POST" action="">
                          {:token()}
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div id="demo-error-container"></div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div class="text-left">
                                  <label for="signupInputPassword" class="control-label">手机号</label>
                                  <input type="text" id="mobiles" autocomplete="off" name="mobile" data-rule="required;mobile" class="form-control" placeholder="{:__('Mobile')}">
                              </div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div class="text-left">
                                  <label for="signupInputRepassword" class="control-label">手机验证</label>
                                  <div class="row">
                                      <div class="col-md-8 col-xs-8 col-lg-8" style="padding-left: 15px;">
                                      <input type="text" name="mcaptcha" id="mcaptcha" class="form-control" placeholder="{:__('手机验证码')}" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_sms_correct')}, event=bindqq, mobile:#mobiles, captcha:#mcaptcha)">

                                      </div>
                                      <div class="col-md-4 col-xs-4 col-lg-4">
                                        <span class="input-group-addon" style="padding:0;border:none;">
                                        <a href="" class="btn btn-info btn-captcha {if condition="request()->isMobile()"}btn-block{/if}" style=";border-radius: 0;" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="bindqq">发送验证码</a>
                                    </span>
                                   </div>
                                      </div>
                              </div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <button type="submit" class="btn btn-primary btn-block">绑定</button>
                          </div>
                      </form>
                      <form name="form" id="register-form" class="form-inline" method="POST" action="/index/user/register">
                          {:token()}
                          <input type="hidden" name="qq_openid" value="{$openid}">
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div id="demo-error-container"></div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div class="text-left">
                                  <label for="signupInputPassword" class="control-label">邮箱</label>
                                  <input type="text" name="email" autocomplete="off" id="email" data-rule="required;email" class="form-control" placeholder="{:__('Email')}">
                              </div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div class="text-left">
                                  <label for="signupInputPassword" class="control-label">账号</label>
                                  <input type="text" id="username" autocomplete="off" name="username" data-rule="required;username" class="form-control" placeholder="{:__('Username must be 3 to 30 characters')}">
                              </div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div class="text-left">
                                  <label for="signupInputPassword" class="control-label">密码</label>
                                  <input type="password" id="password" autocomplete="off" name="password" data-rule="required;password" class="form-control" placeholder="{:__('Password must be 6 to 30 characters')}">
                              </div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div class="text-left">
                                  <label for="signupInputPassword" class="control-label">手机</label>
                                  <input type="text" id="mobile" autocomplete="off" name="mobile" data-rule="required;mobile" class="form-control" placeholder="{:__('Mobile')}">
                              </div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                              <div class="text-left">
                                  <label for="signupInputRepassword" class="control-label">验证</label>
                                  <div class="row">
                                      <div class="col-md-8 col-xs-8 col-lg-8" style="padding-left: 15px;">
                                      <input type="text" name="mobile_captcha" id="mobile_captcha" class="form-control" placeholder="{:__('手机验证码')}" data-rule="required;length(4);integer[+];remote({:url('api/validate/check_sms_correct')}, event=register, mobile:#mobile, captcha:#mobile_captcha)" style="border-radius: 0;"><span class="msg-box n-right" for="mobile_captcha"></span></span>

                                      </div>
                                      <div class="col-md-4 col-xs-4 col-lg-4">
                                        <span class="input-group-addon" style="padding:0;border:none;">
                                          <a href="" class="btn btn-info btn-captcha {if condition="request()->isMobile()"}btn-block{/if}" style=";border-radius: 0;" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="register">发送验证码</a>
                                      </span>
                                   </div>
                                      </div>
                              </div>
                          </div>
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <div class="text-left">
                                        <label for="signupInputPassword" class="control-label">图形</label>
                                        <div class="row">
                                        <div class="col-md-8 col-xs-8 col-lg-8" style="padding-left: 15px;">
                                            <input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}" data-rule="required;length(4)" style="border-radius: 0;" autocomplete="off" />
                                        </div>
                                        <div class="col-md-4 col-xs-4 col-lg-4">
                                            <img src="/api/common/captcha" style="height: 35px;{if condition="request()->isMobile()"} width:100% {/if}" onclick="this.src = '/api/common/captcha?r=' + Math.random();"/>
                                        </div>
                                        </div>
                                </div>
                            </div>
                            {if condition="$price"}
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <div class="text-left">
                                    <label for="signupInputPassword" class="control-label">支付方式</label>
                                    <select class="form-control" data-rule="required;" name="type" style="width: 100%"> 
                                        <option value="alipay">支付宝</option>
                                        <option value="wxpay">微信</option>
                                        <option value="qqpay">QQ钱包</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group col-md-12 col-sm-12 col-xs-12">
                                <div class="text-left">
                                    <label for="signupInputPassword" class="control-label">费用</label>
                                    <input type="text" class="form-control" value="{$price}" disabled="disabled">
                                </div>
                            </div>
                            {/if}
                          <div class="form-group col-md-12 col-sm-12 col-xs-12">
                            <button type="submit" class="btn btn-primary btn-block">注册</button>
                        </div>
                      </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="/assets/home/js/jquery-2.1.1.min.js"></script>
        <script src="/assets/home/js/bootstrap.min.js"></script>
        <script src="/assets/home/plugins/fast-click/fastclick.min.js"></script>
        <script src="/assets/home/plugins/switchery/switchery.min.js"></script>
        <script src="/assets/home/plugins/bootstrap-select/bootstrap-select.min.js"></script>
        <script src="/assets/home/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>
        <script src="/assets/home/js/demo/pages-register.js"></script>
        {include file="common/script" /}
    </body>
</html>